<template>
	<scroll-view scroll-y class="scroll-view">
		
		<!-- 已登录: 显示购物车 -->
		<template v-if="true">
			<view class="cart-main">
				<view class="title">
					<uni-section title="购物车" style="width: 100%;" type="line">
						<uni-notice-bar show-icon scrollable
						background-color="#f5f5f5"
							text="满1件, 即可享受9折优惠" />
					</uni-section>
				</view>
			</view>
			<view class="cart-list" v-if="true">
				<!-- 优惠提示 -->
				<!-- <view class="tips">
					<text class="label">满减</text>
					<text class="desc">满1件, 即可享受9折优惠</text>
				</view> -->
				<!-- 滑动操作分区 -->
				<uni-swipe-action>
					<uni-swipe-action-item v-for="item in 2" :key="item" class="cart-swipe">
						<!-- 商品信息 -->
						<view class="goods">
							<!-- 选中状态 -->
							<text class="checkbox" :class="{ checked: true }"></text>
							<image mode="aspectFill" class="picture"
								src="https://yanxuan-item.nosdn.127.net/da7143e0103304f0f3230715003181ee.jpg"></image>
							<view class="meta">
								<view class="name ellipsis">人手必备，儿童轻薄透气防蚊裤73-140cm</view>
								<view class="attrsText ellipsis">黄色小象 140cm</view>
								<view class="price">69.00</view>
							</view>
							<!-- 商品数量 -->
							<view class="count">
								<text class="text">-</text>
								<input class="input" type="number" value="1" />
								<text class="text">+</text>
							</view>
						</view>
					</uni-swipe-action-item>
					<!-- 右侧删除按钮 -->
					<template #right>
						<view class="cart-swipe-right">
							<button class="button delete-button">删除</button>
						</view>
					</template>
				</uni-swipe-action>
				<!-- 吸底工具栏 -->
				<view class="toolbar">
					<text class="all" :class="{ checked: true }">全选</text>
					<text class="text">合计:</text>
					<text class="amount">100</text>
					<view class="button-grounp">
						<view class="button payment-button" :class="{ disabled: true }">
							去结算(10)
						</view>
					</view>
				</view>
<!-- 底部占位空盒子 -->
    <view class="toolbar-height"></view>
			</view>
		</template>
	</scroll-view>
</template>

<script lang="ts">
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	// 根元素
	:host {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	// 滚动容器
	.scroll-view {
		flex: 1;
	}

	// 购物车列表
	.cart-list {
		padding: 0 20rpx;

		// 优惠提示
		.tips {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 30rpx 10rpx;
			font-size: 26rpx;
			color: #666;

			.label {
				color: #fff;
				padding: 7rpx 15rpx 5rpx;
				border-radius: 4rpx;
				font-size: 24rpx;
				background-color: #27ba9b;
				margin-right: 10rpx;
			}
		}

		// 购物车商品
		.goods {
			display: flex;
			padding: 20rpx 20rpx 20rpx 80rpx;
			border-radius: 10rpx;
			background-color: #fff;
			// position: relative;

			.navigator {
				display: flex;
			}

			.checkbox {
				position: absolute;
				top: 0;
				left: 0;

				display: flex;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 100%;

				&::before {
					content: '\e6cd';
					font-family: 'erabbit' !important;
					font-size: 40rpx;
					color: #444;
				}

				&.checked::before {
					content: '\e6cc';
					color: #27ba9b;
				}
			}

			.picture {
				width: 170rpx;
				height: 170rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
			}

			.name {
				height: 72rpx;
				font-size: 26rpx;
				color: #444;
			}

			.attrsText {
				line-height: 1.8;
				padding: 0 15rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				line-height: 1;
				font-size: 26rpx;
				color: #444;
				margin-bottom: 2rpx;
				color: #cf4444;

				&::before {
					content: '￥';
					font-size: 80%;
				}
			}

			// 商品数量
			.count {
				position: absolute;
				bottom: 20rpx;
				right: 5rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 220rpx;
				height: 48rpx;

				.text {
					height: 100%;
					padding: 0 20rpx;
					font-size: 32rpx;
					color: #444;
				}

				.input {
					height: 100%;
					text-align: center;
					border-radius: 4rpx;
					font-size: 24rpx;
					color: #444;
					background-color: #f6f6f6;
				}
			}
		}

		.cart-swipe {
			display: block;
			margin: 20rpx 0;
		}

		.cart-swipe-right {
			display: flex;
			height: 100%;

			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50px;
				padding: 6px;
				line-height: 1.5;
				color: #fff;
				font-size: 26rpx;
				border-radius: 0;
			}

			.delete-button {
				background-color: #cf4444;
			}
		}
	}

	// 空状态
	.cart-blank,
	.login-blank {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 60vh;

		.image {
			width: 400rpx;
			height: 281rpx;
		}

		.text {
			color: #444;
			font-size: 26rpx;
			margin: 20rpx 0;
		}

		.button {
			width: 240rpx !important;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			font-size: 26rpx;
			border-radius: 60rpx;
			color: #fff;
			background-color: #27ba9b;
		}
	}

	// 吸底工具栏
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;

		.all {
			margin-left: 25rpx;
			font-size: 14px;
			color: #444;
			display: flex;
			align-items: center;
		}

		.all::before {
			font-family: 'erabbit' !important;
			content: '\e6cd';
			font-size: 40rpx;
			margin-right: 8rpx;
		}

		.checked::before {
			content: '\e6cc';
			color: #27ba9b;
		}

		.text {
			margin-right: 8rpx;
			margin-left: 32rpx;
			color: #444;
			font-size: 14px;
		}

		.amount {
			font-size: 20px;
			color: #cf4444;

			.decimal {
				font-size: 12px;
			}

			&::before {
				content: '￥';
				font-size: 12px;
			}
		}

		.button-grounp {
			position: absolute;
			right: 10rpx;
			top: 50%;

			display: flex;
			justify-content: space-between;
			text-align: center;
			line-height: 72rpx;
			font-size: 13px;
			color: #fff;
			transform: translateY(-50%);

			.button {
				width: 240rpx;
				margin: 0 10rpx;
				border-radius: 72rpx;
			}

			.payment-button {
				background-color: #27ba9b;

				&.disabled {
					opacity: 0.6;
				}
			}
		}
	}

	// 底部占位空盒子
	.toolbar-height {
		height: 100rpx;
		box-sizing: content-box;
	}
</style>